 {include file="public/head" /}
 <meta charset="utf-8">
 <style>
 .form{padding:10px;}
 .form > div{margin-bottom:10px;}
 .btn-box{margin-top:10px;}
 .up-img{border:1px dashed #ccc;border-radius:3px;height:40px;line-height:40px;text-align:center;width:200px;color:#999;}
 .pay-img{width:200px;}
 </style>
<body>
	<div id="box" v-cloak>
		<div class="form">
			<div class='from-group input-group-sm'>
				<label>充币金额</label>
				<input type='text' placeholder="请输入充币数量" v-model="price" class="form-control">
			</div>
			<div class='from-group input-group-sm'>
				<label>充币地址</label>
				<input type='text' placeholder="请输入充币地址" v-model="address" class="form-control" readonly="readonly">
			</div>
			<div class='from-group input-group-sm'>
				<label>打款截图</label>
				<div>
					<label for="add-img">
						<div class="up-img" v-if="!pay_img">点击上传图片</div>
						<img :src="pay_img" v-else>
					</label>
					<input type="file" id="add-img" style="display:none" @change="upImg">
				</div>
			</div>
			<div class='from-group input-group-sm btn-box'>
				<button class="btn btn-sm btn-primary" @click="submit()">立即提交</button>
			</div>
		</div>
	</div>
</body>
<script>
new Vue({
	el:"#box",
	data:{
		pay_img : '',
		price : '',
		address : '{$address}'
	},
	mounted:function(){},
	methods:{
		//提交数据
		submit:function(){
			ajax("{:url('insertDao')}",{
				data:{price : this.price ,address : this.address , pay_img : this.pay_img},
				success:function(res){
					if(res.code) {
						layer.msg(res.msg,{icon:1,time:1000},function(){
							parent.location.reload();
						});
					}else{
						layer.msg(res.msg,{icon:2,time:1000});
					}
				}
			});
		},
		//上传图片
		upImg:function(state){
			var _this = this;
			var file = event.currentTarget;
			var reader = new FileReader();
			reader.onload = function(evt){
				_this.pay_img = evt.target.result;
			}
			reader.readAsDataURL(file.files[0]);
		}
	}
});
</script>
</html>